<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>军运会</title>
    <link rel="stylesheet" href="./css/bootstrap3/css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/fullPage/css/fullpage.css">
    <script src="./js/bootstrap3/js/bootstrap.min.js"></script>
    <script src="./js/jquery-3.3.1.min.js"></script>
    <script src="./js/fullPage.js/js/fullpage.min.js"></script>
    <style>
        #fullPage {
            text-align: center;
            color: white;
        }

        h1 {
            font-size: 5em
        }

        #fp-nav ul li a span, .fp-slidesNav ul li a span {
            background: #fff;
        }

        .fp-controlArrow.fp-next {
            right: 50px
        }

        .fp-controlArrow.fp-prev {
            left: 50px
        }

        .nav {
            position: fixed;
            top: 10px;
            right: 30px;
            z-index: 1000;
        }

        .nav a {
            text-decoration: none;
            color: white;
            padding: 10px
        }

        .fp-tableCell > img {
            max-width: 100%
        }

        .home {
            background: url("./img/top_banner_01.png") no-repeat center center;
            background-size: cover;
        }

        .milit-desc {
            position: relative;
            top: 200px;
            text-align: center;
            color: #fff;
            text-indent: 60px;
            font-size: 2.2rem;
            letter-spacing: 60px;
        }

        body .rest-time .rest-day {
            font-size: 5rem;
            letter-spacing: 1rem;
        }

        img.full {
            max-width: 130px;
        }

        .bingbing {
            position: relative;
            right: -200px;
            top: -150px;
        }

        body {
            font-size: 1.4rem;
        }

        body .rest-time {
            position: relative;
            top: 200px;
            width: 900px;
            margin: 0 auto;
            margin-top: 240px;
            margin-bottom: 300px;
            text-align: center;
            color: #fff;
            /* font-size: 2rem; */
            font-weight: bold;
        }

        #fullPage a {
            color: snow;
            text-decoration: none
        }
    </style>
</head>
<body>
<div class="nav">
    <a href="#homePage">首页</a>
    <a href="#secondPage">介绍</a>
    <a href="#thirdPage">门票管理</a>
    <a href="#lastPage">订票</a>
</div>
<div id="fullPage">
    <div class="section home">
        <div class="milit-desc">
            <p>第七届世界军人运动会</p>
        </div>
        <div class="rest-time">
            <p class="text">距离第七届世界军人运动会开幕还有</p>
            <p>
                <span class="rest-day">20</span>
                <span>天</span>
            </p>
            <div class="bingbing">
                <img class="full" src="https://www.wuhan2019mwg.cn/v2/images/binbi_03.png" alt="">
            </div>
        </div>
    </div>
    <div class="section">
        <div class="slide"><img src="./img/banner_1.jpg" alt=""></div>
        <div class="slide"><img src="./img/banner_2.jpg" alt=""></div>
        <div class="slide"><img src="./img/banner_3.jpg" alt=""></div>
        <div class="slide"><img src="./img/banner_4.jpg" alt=""></div>
    </div>
    <div class="section">
        <a href="./tickets.html"><h2>门票管理</h2></a>

    </div>

    <div class="section">
        <a href="./order.html"><h2>订票</h2></a>
    </div>
</div>
<script>
    $(function () {
        $("#fullPage").fullpage({
            autoScrolling: true,
            scrollHorizontally: true,
            sectionsColor: ['orange', 'skyblue', 'pink', 'red'],
            navigation: true,
            navigationTooltips: ['首页', '简介', '门票管理', '订票'],
            slidesNavigation: true,
            anchors: ['homePage', 'secondPage', 'thirdPage', 'lastPage'],
        });
        /*倒计时*/
        let now = new Date();
        let startDay = new Date("2019/10/18");
        let countDowmTime = startDay.getTime() - now.getTime();
        let countDowm = parseFloat(countDowmTime / (1000 * 60 * 60 * 24));
        let countDownDay = Math.ceil(countDowm) >= 0 ? Math.ceil(countDowm) : "已开幕";
        $(".rest-day").html(countDownDay);
        console.log("countDowm" + countDownDay)
    })
</script>
</body>
</html>